<template>
  <div class="bg">
    <div class="header">
      <div class="date">{{ datestr }}</div>
    </div>
    <div class="content">
      <div class="legend">
        <div>总计 {{ list.length }}</div>
        <div><i></i>停机 {{ ms2Count }}</div>
        <div><i></i>手动 {{ ms1Count }}</div>
        <div><i></i>自动 {{ ms0Count }}</div>
      </div>
      <ul ref="listRef" @mouseenter="pause" @mouseleave="play">
        <li v-for="item in list" :key="item.JTH" @click="toLink(item)">
          <div :class="['top', `mode-${item.MS}`]">
            <div>{{ item.JTH }}</div>
            <div>{{ ms(item.MS) }}</div>
          </div>
          <div class="mid">
            <div class="item">
              <div class="label">计划单号</div>
              <div class="value">{{ item.JHDH }}</div>
            </div>
            <div class="item">
              <div class="label">产品</div>
              <div class="value">{{ item.CP }}</div>
            </div>
            <div class="item">
              <div class="label">停机时长</div>
              <div class="value">{{ item.TJSC }}</div>
            </div>
            <div class="item">
              <div class="label">计划模数</div>
              <div class="value">{{ item.JHMS }}</div>
            </div>
            <div class="item">
              <div class="label">实际模数</div>
              <div class="value">{{ item.SJMS }}</div>
            </div>
          </div>
          <div class="bot">{{ item.BFB }}</div>
        </li>
      </ul>
    </div>


  </div>
</template>

<script setup>
import dayjs from 'dayjs'

// 日期时间
const datestr = ref()
let timer1
const getTime = () => {
  timer1 = setInterval(() => {
    datestr.value = dayjs().format("YYYY-MM-DD HH:mm:ss")
  }, 1000)
}

const listRef = ref()
let scrollTop = ref(0) // 滚动高度
let timer2
let timer3
const scroll = () => {
  timer2 = setInterval(() => {
    scrollTop.value++
    listRef.value.scrollTop = scrollTop.value
    // 滚动到底部3秒后从头开始
    if (scrollTop.value + listRef.value.clientHeight >= listRef.value.scrollHeight) {
      clearInterval(timer2)
      timer3 = setTimeout(() => {
        scrollTop.value = 0
        scroll()
      }, 3000)
    }
  }, 40)
}

// 鼠标移入暂停滚动
const pause = () => {
  clearInterval(timer2)
  clearTimeout(timer3)
}
const play = () => {
  scroll()
}

// 获取列表
const list = ref([])
const ms0Count = ref(0)
const ms1Count = ref(0)
const ms2Count = ref(0)
const getList = async () => {
  const response = await fetch('/jiashuo/data/board1.json')
  list.value = await response.json()

  scroll()
  ms0Count.value = list.value.filter(i => i.MS == 0).length
  ms1Count.value = list.value.filter(i => i.MS == 1).length
  ms2Count.value = list.value.filter(i => i.MS == 2).length
}

// 机台模式
const ms = (MS) => {
  let msName
  switch (MS) {
    case 0:
      msName = '自动'
      break;
    case 1:
      msName = '手动'
      break;
    case 2:
      msName = '停机'
      break;
    default:
      break;
  }
  return msName
}

// 跳转
const toLink = (item) => {
  window.open(`https://baidu.com?JTH=${item.JTH}`)
}

onMounted(() => {
  getTime()
  getList()
})
onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
  clearTimeout(timer3)
});
</script>

<style lang="scss" scoped>
.bg {
  height: 100vh;
  background: url("@/assets/img/bg1.jpg");
  background-size: 100% 100%;
}

.header {
  height: 80px;
  height: 7.41vh;

  .date {
    position: absolute;
    right: 3.2%;
    top: 1.6vh;
    font-size: 16px;
    color: #16c1c0;
  }
}

.content {
  height: calc(100% - 7.41vh - 5vh);
  margin: 0 3.2% 0 2.8%;
  // border: 1px solid #fff;
}

.legend {
  display: flex;
  // height: 60px;
  height: 4.8vh;
  padding-top: .8vh;
  font-size: 16px;
  color: #fff;

  // border: 1px solid #fff;
  div {
    margin-right: 20px;

    i {
      display: inline-block;
      vertical-align: middle;
      width: .8vw;
      height: .8vw;
      margin-right: 4px;
      border: 3px double #fff;
      border-radius: 50%;
    }

    &:nth-child(2) i {
      border-color: #f90505;
    }

    &:nth-child(3) i {
      border-color: #e1d004;
    }

    &:nth-child(4) i {
      border-color: #00ab45;
    }
  }
}

ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100% - 4.8vh);
  overflow: hidden;

  // transition: all .1s;
  // border: 1px solid #f00;
  li {
    width: calc((100% - 10px*4)/5);
    // height: 268px;
    // height: 24.81vh;
    margin: 0 10px 10px 0;
    padding-bottom: 10px;
    border: 1px solid #3f5d5b;
    cursor: pointer;

    &:nth-child(5n) {
      margin-right: 0;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 58px;
      height: 5.4vh;
      padding: 0 10px;
      color: #fff;

      &.mode-0 {
        background: #00ab45;
      }

      &.mode-1 {
        background: #e1d004;
      }

      &.mode-2 {
        background: #f90505;
      }

      div {
        &:nth-child(1) {
          font-size: 26px;
          font-weight: bold;
        }

        &:nth-child(2) {
          font-size: 20px;
        }
      }
    }

    .mid {
      padding: 8px 16px;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        color: #fff;
      }
    }

    .bot {
      font-size: 36px;
      color: #fff;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>